<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-table-view .layui-table[lay-size="sm"] .layui-select-title .layui-input {
            height: 28px;
            margin-top: -8px;
        }

        .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
            line-height: 28px;
        }

        .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl {
            top: 28px;
        }

        .layui-table-view .layui-table .layui-select-title .layui-input {
            height: 32px;
            margin-top: -3px;
        }

        .layui-table-view .layui-table .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
            line-height: 32px;
        }

        .layui-table-view .layui-table .layui-form-select dl {
            top: 32px;
        }

        .layui-table-view .layui-table[lay-size="lg"] .layui-select-title .layui-input {
            height: 38px;
            margin-top: 0;
        }

        .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
            line-height: 38px;
        }

        .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl {
            top: 38px;
        }

        /*.tableWithoutHead .layui-table-header {*/
        /*display: none;*/
        /*}*/
    </style>
</head>
<body>

<button class="layui-btn" id="getCheckedData">获得表格选中行</button>
<div class="tableWithoutHead">
    <table id="grid" lay-filter="grid" class="tableWithoutHead" lay-skin="nob"></table>
</div>

<script src="<%=path%>/plugins/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="childrenTpl">
<select name="children" lay-filter="children-select" >
{{# layui.each(d.children, function(index, data) {}} <option value="{{data.cname}}">{{data.cname}}</option> {{# });}}
</select>
</script>
<script>

    layui.use(['table', 'layer', 'element', 'jquery', 'form'], function (table, layer, element, $, form) {
        var jsonData = [{
            cid: 1,
            cname: '目录1',
            children: [
                {cid: 101, cname: '目录1-01'},
                {cid: 102, cname: '目录1-02'},
                {cid: 103, cname: '目录1-03'},
                {cid: 104, cname: '目录1-04'},
                {cid: 105, cname: '目录1-05'},
                {cid: 106, cname: '目录1-06'}
            ],
            city: 20000
        }, {
            cid: 2,
            cname: '目录2',
            children: [
                {cid: 201, cname: '目录2-01'},
                {cid: 202, cname: '目录2-02'},
                {cid: 203, cname: '目录2-03'}
            ]
        }];

        // 监听修改update到表格中
        form.on('select(testSelect)', function (data) {
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['grid'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            // 其他的操作看需求 TODO
        });
        $('#getCheckedData').click(function () {
            // 验证一下下拉选择之后有没有作用到表格缓存数据
            var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
            layer.alert(JSON.stringify(checkStatus));
        });
        var tableIns = table.render({
            elem: '#grid',
            // width: 600,
            height: 1000,
            data: jsonData,
            done: function (res, curr, count) {
                var tableElem = this.elem.next('.layui-table-view');
                count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                layui.each(tableElem.find('select'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                form.render();
            },
            // size: 'lg',
            cols: [[ //表头
                {type: 'checkbox'/*, fixed: true*/},
                {field: 'cid', title: '分类id', edit: true},
                {field: 'cname', title: '分类名称'},
                {field: 'children', title: '子分类', templet: '#childrenTpl'},
                {
                    field: 'city',
                    title: '<a href="//baidu.com">城市</a>',
                    align: 'center',
                    width: 200,
                    templet: function (d) {
                        // 模板的实现方式也是多种多样，这里简单返回固定的
                        return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + d.city + '" >\n' +
                            '        <option value=""></option>\n' +
                            '        <option value="18000">北京</option>\n' +
                            '        <option value="20000">上海</option>\n' +
                            '        <option value="20001">广州</option>\n' +
                            '        <option value="20002">深圳</option>\n' +
                            '        <option value="20003">杭州</option>\n' +
                            '      </select>';
                    }
                }
            ]]
        });
    });
</script>

</body>
</html>